<template>
  <div v-if="ranks">
    <div class="rank-harder">
      <div class="conter">
        <img :src="ranks.album.blurPicUrl" alt="" />
      </div>
      <div class="button" @click.stop="$router.go(-1)">
            <span class="iconfont icon-arrow-left-bold"></span>
            {{"排行榜"}}
        </div>
    </div>
    <div class="rank-title">
      <i class="iconfont icon-bofang"></i>播放全部<span
        >(共{{ ranks.songs.length }}首)</span
      >
      <van-icon name="credit-pay" style="margin-left:170px" size="24px" />
    </div>
    <div class="rank-list">
      <div class="">
        <van-cell
          center
          v-for="(item, index) in ranks.songs"
          :key="item.id"
          @click="setId(item.id)"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #right-icon>
           <van-icon name="play-circle-o" size="30" color="rgb(170,170,170)"/>
          </template>
          <template #icon>
            <span class="list-id">{{ index + 1 }}</span>
          </template>
          <template #title>
            <span class="custom-title">{{ item.name }}</span>
          </template>
          <template #label >
            <span class="icon"></span>
            <span class="custom-title" v-for="(i,index) in item.ar" :key="index+'ar'">  {{i.name}}</span>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
// import { Toast } from 'vant';
import {getAlbum} from "../api/singer"
export default {
  data: function () {
    return {
      time: null,
      ranks: {
        tags:'',
        tracks: [],
        coverImgUrl: "",
       
      },
       t:1
    };
  },
  methods: {
    setId(id) {
      this.$emit("get-player-id", id);
       this.$emit("get-play-all-id",this.$route.query.id);//传递歌单id
    },
    // subscribe(){
    
    //   if(this.t=='1'){
    //     Toast('收藏成功')
    //   }else{
    //     Toast('取消收藏!')
    //   }
    //   getSubscribe({
    //     t:this.t,
    //     id:this.$route.query.id
    //   }).then(data=>{
    //     console.log(data)
    //   })
    //   this.t++;
    //   if(this.t=='3'){
    //     this.t=1
    //   }
    //   console.log(this.t)
    // }
  },
  created() {
    let id=this.$route.query.id;
    // if (!("id" in id)) {
    //   this.$router.push("/rank");
    // }
    getAlbum({ id }).then((data) => {
      console.log(data)
      this.ranks = data ;
      console.log(this.ranks)
    });
  },
};
</script>
<style lang="less">
.rank-harder {
  width: 100%;
  position: relative;
  height: 300px;
  .button{
    position: absolute;
    color: #fff;
    top: 0px;
    z-index: 1;
    font-size: 16px;
    padding: 10px;
  }
  .conter {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .time {
    color: #fff;
    position: absolute;
    text-align: center;
    z-index: 1;
    left: 0px;
    margin: auto;
    right: 0px;
    bottom: 20px;
  }
}
.rank-title {
  padding: 20px;
}
.rank-list {
  .van-cell__title {
    flex: 2;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap;
    font-size: 17px;
  }
  .titles {
    color: #969777;
  }
  .list-id {
    font-size: 17px;
    margin-right: 10px;
  }
  .icon {
    display: inline-block;
    width: 32px;
    height: 16px;
    background-image: url("https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=");
    background-size: auto;
    background-repeat: no-repeat;
    vertical-align: text-bottom;
  }
}
</style>
